<template>
  <div class="search_user">
    <li v-for="(item, index) in list" :key="index">
      <div class="bg_box">
        <img src="../../assets/user.png" alt="" />
      </div>
      <div class="content_block" @click="toUserInfo(index)">
        <div class="content_box">
          <div class="buddha_box">
            <img src="../../assets/user.png" alt="" />
          </div>
          <div class="text_box">
            <h3>{{ item.username }}</h3>
            <p>{{ item.description }}</p>
            <div class="data_box">
              <div class="fans_box">
                <span>粉丝</span>
                <span class="data">{{ item.fans }}</span>
              </div>
              <div class="follow_box">
                <span>关注</span>
                <span class="data">{{ item.stars }}</span>
              </div>
              <div class="album_o">
                <span>专辑</span>
                <span class="data">{{ item.album }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </li>
  </div>
  <div class="page_apart_block">
    <page_apart />
  </div>
</template>

<script>
import page_apart from "../circle_use/page_apart.vue";
export default {
  name: "search_user",
  components: {
    page_apart,
  },
  data() {
    return {
      list: [],
    };
  },
  mounted() {
    this.$http
      .get("/search/user", {
        params: {
          keyword: this.$route.query.keyword,
          limit: 12,
        },
      })
      .then((res) => {
        if (res.data.data.count === 0) {
          alert("空");
        } else {
          this.list = res.data.data.list;
        }
      });
  },
  methods: {
    toUserInfo(index) {
      this.$router.push({
        path: "/info",
        query: {
          infoFlag: 1,
          id: this.list[index].id,
        },
      });
    },
  },
};
</script>

<style scoped>
.search_user {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 1198px;
  height: 532px;
  margin: 0 auto;
  padding-top: 58px;
}
li {
  width: 387px;
  height: 162px;
  border-radius: 5px;
}
.bg_box {
  float: left;
  width: 387px;
  height: 162px;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}
.bg_box::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #000;
  opacity: 0.38;
}
.bg_box img {
  width: 110%;
  height: 110%;
  margin-top: -4px;
  border-radius: 5px;
  filter: blur(5px);
}
.content_block {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 387px;
  height: 162px;
  border-radius: 5px;
  position: absolute;
  transition: all 0.3s;
}
.content_block:hover {
  cursor: pointer;
  transform: scale(1.05);
}
.content_box {
  display: flex;
  justify-content: space-between;
  width: 313px;
  height: 84px;
}
.content_box img {
  width: 84px;
  height: 84px;
  border-radius: 42px;
}
.text_box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 217px;
  height: 80px;
}
h3 {
  font-size: 18px;
  font-family: Microsoft YaHei UI;
  font-weight: bold;
  color: #ffffff;
}
p {
  font-size: 14px;
  font-family: Microsoft YaHei UI;
  font-weight: 300;
  color: #ffffff;
}
.data_box {
  display: flex;
  justify-content: space-between;
}

.data_box div span {
  font-size: 14px;
  font-family: Microsoft YaHei UI;
  font-weight: 300;
  color: #ffffff;
  margin: 0 5px;
}
.data_box div .data {
  margin-left: 5px;
  font-size: 18px;
  font-family: Impact;
  font-weight: 400;
  color: #ffffff;
}
.page_apart_block {
  padding-top: 110px;
}
</style>